<script setup lang="ts">
import { computed, onMounted, ref, shallowReactive } from "vue";
import Echart from "../Echart.vue";
import ArcText from "./ArcText.vue";
import useResize from "@/hooks/useResize";


defineOptions({
  inheritAttrs: false,
});
const state = shallowReactive({
  width: 500,
  height: 500,
  list: [
    { value: 40, name: "6岁以下患者占比" },
    { value: 38, name: "6-14岁患者占比" },
    { value: 44, name: "15-44岁患者占比" },
    { value: 50, name: "45-59岁患者占比" },
    { value: 28, name: "60岁以上患者占比" },
  ],
});
const radius = computed(() => state.width < state.height ? state.width * 0.4 : state.height * 0.4)
const option = computed(() =>
  getRose({ radius: radius.value, data: state.list })
);
const textList = computed(() => state.list.map((t) => t.name));

const wrap = ref<HTMLDivElement>();
useResize(() => {
  if (wrap.value) {

    state.width = wrap.value.offsetWidth;
    state.height = wrap.value.offsetHeight;

  }
})



function getRose({ data = [] as any[], radius = 180 } = {}): any {
  const color = ["#5FB0F3", "#62D9AD", "#5B6E96", "#A8DFFA", "#FFDD58"];
  return {
    color,
    title: {},
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: false,
      top: "bottom",
    },
    radar: [
      {
        z: 1,
        indicator: data.map(() => ({ text: "" })),

        center: ["50%", "50%"],
        radius,
        startAngle: 90,
        splitNumber: 5,
        shape: "circle",
        // name: {
        //   formatter: "",
        //   textStyle: {
        //     color: "#72ACD1",
        //   },
        // },
        splitArea: {
          show: false,
          areaStyle: {
            // color: "#fff",
            // shadowBlur: 20,
            // shadowColor: "rgba(0,0,0,0.3)",
          },
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
            type: [3, 5],
            dashOffset: 0,
          },
        },
      },
    ],
    toolbox: {
      show: false,
    },
    series: [
      {
        name: "",
        type: "pie",
        z: 0,
        radius: [20, radius],
        center: ["50%", "50%"],
        roseType: "area",

        label: {
          show: true,
          position: "inside",
          color: "#fff",
          formatter: "{c}%",
          backgroundColor: "rgba(0,0,0,0.4)",
          padding: [4, 8],
        },
        labelLine: {},
        itemStyle: {
          //去除饼图的指示折线label
          borderRadius: 0,
        },
        data: data,
      },
    ],
  };
}
</script>
<template>
  <div ref="wrap" :class="$style.wrap">
    <ArcText :list="textList" :radius="radius + 10" :width="state.width" :height="state.height" />
    <Echart :option="option" :class="$style.chart" />
  </div>
</template>
<style module>
.wrap {
  height: 100%;
  display: flex;
  position: relative;
}

.chart {
  flex: 1;
}
</style>
